<script lang="ts">
import Vue from 'vue'
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {getUnbound, storeBindMachine} from "@/services/Agents/machine";
import tips from "@/utils/tips";
import Popup from "@/components/popup/popup.vue";
import {Machine, Stores} from "@/types/agent/stores";
import {myReplace} from "@/utils/utils";

export default Vue.extend({
  name: "MachineBind",
  components: {Popup, NavBar},
  data() {
    return {
      bindMachines: [] as Machine[],
      store: {} as Stores,
      selectedMachine: {} as Machine,
      machineBindShow: false
    }
  },
  computed: {
    lang() {
      return this.$t('agentPages.machineBind')
    },
  },
  onLoad(query?: AnyObject) {
    this.store = JSON.parse(decodeURIComponent(query.store))
    this.getBindMachines()
  },
  methods: {
    myReplace,
    async getBindMachines() {
      const machineRes = await getUnbound()
      const {code, data, msg} = machineRes
      if (code === 200) {
        this.bindMachines = data.data
      } else {
        tips.toast(msg)
      }
    },
    onBindPrinter(index: number) {
      console.log("index -==--", index)
      this.selectedMachine = this.bindMachines[index]
      this.machineBindShow = true
    },
    async machineBindConfirm() {
      const {device_id: device_key, device_password} = this.selectedMachine
      const bindMachineRes = await storeBindMachine(this.store.id, device_key, device_password)
      const {code, msg, data} = bindMachineRes
      console.log('bindMachineRes', bindMachineRes)
      uni.navigateBack({delta: 2})
      this.machineBindShow = false
      tips.toast(msg)
    },
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="['padding-30', locale]">
      <view v-for="(item, index) in bindMachines" :key="index" class="card column gap-8 text-28 padding-20 radio-10"
            @click="onBindPrinter(index)">
        <!-- 头部照片和名称-->
        <view class="flex-center gap-20">
          <image class="icon-90" src="/static/agent/device.png" mode="aspectFit"/>
          <view class="column gap-8">
            <view>{{ item.name || lang.deviceName }}</view>
            <view>
              <view>{{ item.device_id }}</view>
            </view>
          </view>
        </view>
      </view>

      <view v-if="bindMachines.length <= 0" class="center" style="height: 60vh;">
        <u-empty
            mode="data"
            :width="240"
            :hidden="240"
            :textSize="22"
            :text="lang.emptyDevice"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
        />
      </view>
    </view>

    <!-- 绑定设备 -->
    <popup :show="machineBindShow" @update:show="machineBindShow = $event">
      <view class="column gap-40">
        <view class="center text-40">{{ lang.bindModal['title'] }}</view>
        <view class="center text-32">{{ myReplace(lang.bindModal.content, '{storeName}', store.name) }}</view>


        <!-- 确定 取消 -->
        <view class="flex-between">
          <view class="width-40">
            <u-button :text="otherLang.cancel" style="width: 40rpx" size="large" :plain="true"
                      @click="machineBindShow = false"/>
          </view>
          <view class="width-40">
            <u-button type="primary" size="large" @click="machineBindConfirm" :text="otherLang.confirm"/>
          </view>
        </view>
      </view>
    </popup>
  </view>
</template>

<style scoped lang="scss">

</style>